<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
    <title>正在播放</title>
</head>

<body>
    <div class="playing" id="video" style="width: 100%; height: 600px;"></div>
    <script src="js/jquery.min.js"></script>
    <script src="chplayer/chplayer.min.js"></script>
    <script>
        var id = window.location.search;
        // 如果是移动端或者苹果设备则用H5播放,如果不是就用flash播放
        $.get('http://192.168.137.1:3000/movies/playing?id=' + id.split('=')[1] + '', function (data) {
            var url = data.result.list[0].src;
            // 不是 android ipad iphone
            if (/Android|iPad|iPhone/.test(navigator.userAgent)) {
                var h5video =
                    '<video width="100%" controls autoplay playsinline webkit-playsinline><source src="' + url +
                    '"><video>'
                $('.playing').append($(h5video));
            } else {
                showFlashPlayer(url);
            }
        })

        function showFlashPlayer(url) {
            var videoObject = {
                container: '#video', //“#”代表容器的ID，“.”或“”代表容器的class
                variable: 'player', //该属性必需设置，值等于下面的new chplayer()的对象
                poster: '', //封面图片地址
                autoplay: false, //是否自动播放，默认true=自动播放，false=默认暂停状态
                flashplayer: false, //强制使用flashplayer
                html5m3u8: false, //是否使用hls，默认不选择，如果此属性设置成true，则不能设置flashplayer:true,
                video: url
            };
            var player = new chplayer(videoObject);
        }
    </script>
</body>

</html>